<template>
  <div>
      <!--查询表单-->
      <el-form :inline="true" :model="tbAd" class="demo-form-inline">
          <el-form-item label="广告名称">
              <el-input v-model="tbAd.name" placeholder="请输入广告名称"></el-input>
          </el-form-item>
          <el-form-item label="广告位置">
            <el-select v-model="tbAd.position" placeholder="请选择广告位置">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="到期时间">
              <el-date-picker
                  v-model="tbAd.endTime"
                  type="date"
                  placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="primary" @click="dialogFormVisible=true; AdForm={};imageUrl=''">新增</el-button>
          </el-form-item>
      </el-form>

      <!--新增或修改对话框-->
      <el-dialog :title="AdForm.id>0?'编辑':'新增'"
         width="50%"
         :visible.sync="dialogFormVisible">
       <span>
          <el-form :model="AdForm" label-width="80px">
            <el-form-item label="广告名称">
              <el-input v-model="AdForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告位置">
              <el-select v-model="AdForm.position" placeholder="请选择广告位置">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间" >
              <el-date-picker
                v-model="AdForm.startTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format = "yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
               <el-date-picker
                  v-model="AdForm.endTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format = "yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="线上/线下">
              <el-switch
                v-model="AdForm.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0">
              </el-switch>
            </el-form-item>
            <el-form-item label="广告图片" >
              <el-upload
                class="avatar-uploader"
                action="http://localhost:88/api/oss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="广告链接">
              <el-input v-model="AdForm.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="广告备注">
              <el-input v-model="AdForm.remarks" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
       </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false; AdForm={}">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

      <!--数据表格-->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
        label="编号"
        width="100" prop="id">
        </el-table-column>
        <el-table-column
        label="广告名称"
        width="150" prop="name">
        </el-table-column>
        <el-table-column
        label="广告位置"
        width="180" prop="position">
        <template slot-scope="scope">
            <span v-if="scope.row.position == 'index_lb'">首页轮播图</span>
            <span v-else-if="scope.row.position == 'index_amusing'">有趣区</span>
            <span v-else-if="scope.row.position == 'index_ea_lb'">家用电器楼层轮播图</span>
            <span v-else-if="scope.row.position == 'index_ea'">家用电器楼层广告</span>
            <span v-else-if="scope.row.position == 'index_mobile_lb'">手机通讯楼层轮播图</span>
            <span v-else-if="scope.row.position == 'index_mobile'">手机通讯楼层广告</span>
        </template>
        </el-table-column>
        <el-table-column
        label="开始时间"
        width="180" prop="startTime">
        </el-table-column>
        <el-table-column
        label="结束时间"
        width="180" prop="endTime">
        </el-table-column>
          <el-table-column
        label="广告图片"
        width="180">
          <template slot-scope="scope">
          <img :src="scope.row.image" width="160px" height="80px">
          </template>
        </el-table-column>
          <el-table-column
        label="上线/下线"
        width="180">
          <template slot-scope="scope">
            <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="updateStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            @click="handleEdit(scope.index, scope.row)">编辑</el-button>
            <el-button
            size="mini" @click="backtop(scope.row)">置顶</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.index, scope.row)">删除</el-button>
        </template>
        </el-table-column>
     </el-table>

     <!--分页组件-->
     <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="pageSizeList"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
     </el-pagination>
  </div>
</template>

<script>
export default {
     data () {
        return {
            // 呈现数据
          tableData: [],
          // 当前页码
          pageNum: 1,
          // 页大小
          pageSize: 10,
          // 页大小列表
          pageSizeList: [10, 20, 50, 100],
          // 总记录数
          total: 0,
          // 查询表单对象
          tbAd: {},
          // 控制对话框是否显示的标志
          dialogFormVisible: false,
          // 绑定表单对象
          AdForm: {},
          // 映射上传文件组件对应的文件路径
          imageUrl: '',
          // position下拉框
          options: [{
              value: 'index_lb',
              label: '首页轮播图'
            }, {
              value: 'index_amusing',
              label: '有趣区'
            }, {
              value: 'index_ea_lb',
              label: '家用电器楼层轮播图'
            }, {
              value: 'index_ea',
              label: '家用电器楼层广告'
            }, {
              value: 'index_mobile_lb',
            label: '手机通讯楼层轮播图'
            }, {
                value: 'index_mobile',
              label: '手机通讯楼层广告'
          }]
        }
     },
     methods: {
       //置顶方法
       async backtop (tbAd) {
         const { data: res } = await this.$http.post('vi/business/ad/updateSeq',tbAd)
          if (res.success === true) {
          this.$message({
            type: 'success',
            message: res.message
          })
          }else{
              this.$message({
                type: 'info',
                message: res.message
              })
          }
          // 刷新页面
          this.getAdList()
       },
       // 修改状态按钮
       updateStatus (row) {
         this.AdForm = row;
         this.save();
       },
      // 编辑按钮
      async handleEdit (index, row) {
        this.dialogFormVisible = true
        const id = row.id
        // 发送请求
        const { data: res } = await this.$http.get(`vi/business/ad/detail/${id}`)
        this.AdForm = res.data.tbAd
        this.imageUrl = this.AdForm.image
        
      },
       // 新增或编辑对话框的确认按钮，即保存
      async save () {
        this.AdForm.image = this.imageUrl
        console.log(this.imageUrl)
        this.dialogFormVisible = false
        let ress = null;
        // 发请求
        if (this.AdForm.id == null) {
           const { data: res } = await this.$http.post(`vi/business/ad/add`, this.AdForm)
           ress = res; 
        } else {
           const { data: res } = await this.$http.put(`vi/business/ad/update`, this.AdForm)
           ress = res; 
        }
        if (ress.success === true) {
            this.$message({
              type: 'success',
              message: ress.message
            })
        }else{
            this.$message({
              type: 'info',
              message: ress.message
            })
        }
        // 刷新页面
        this.getAdList()
      },
       // 删除按钮
      handleDelete (index, row) {
        const id = row.id
        // 弹框
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { data: res } = await this.$http.get(`vi/business/ad/deleteById/id=${id}`)
          if (res.success == true) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 刷新页面
            this.getAdList()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
       // 查询按钮
      onSubmit () {
        this.pageNum = 1;
        this.getAdList()
      },
      // 页大小改变
      async handleSizeChange (val) {
        this.pageSize = val
        this.getAdList()
      },
      // 页码改变
      async handleCurrentChange (val) {
        this.currentPage = val
        this.getAdList()
      },
     // 获取广告列表信息
     async getAdList () {
        const { data: res } = await this.$http.post(`vi/business/ad/pageQueryByAll/${this.pageNum}/${this.pageSize}`, this.tbAd)
        this.tableData = res.data.pageUtils.rows
        this.total = res.data.pageUtils.total
     },
      // 文件上传的方法
    handleAvatarSuccess (res, file) {
         // 将后台写回的图片路径赋值给imageUrl
        this.imageUrl = file.response.data.fileUrl
      },
    beforeAvatarUpload (file) {
        const isJPG = file.type === 'image/jpeg'
        // 图片大小不能大于2m
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      }
     },
     // 钩子函数
     async created () {
         this.getAdList()
     }
}
</script>

<style>
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
